<template>
  <div class="dashboard-container">
    <div class="app-container">
      <h2>
        权限管理
      </h2>
      <PageTools>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="addAll">添加权限点</el-button>
        </template>
      </PageTools>
      <el-card>
        <el-table
          border
          row-key="id"
          :data="permissionList"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column label="名称" align="center" prop="name" />
          <el-table-column label="描述" prop="code" />
          <el-table-column label="标识" prop="description" />
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-row type="flex" justify="center">
                <el-button v-if="row.type === 1" type="primary" size="small" @click="add(row)">添加</el-button>
                <el-button type="primary" size="small" @click="editPermission(row)">编辑</el-button>
                <el-button type="danger" size="small" @click="delPermission(row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--  添加权限/编辑权限  面板 -->
      <addPermission :id.sync="id" ref="addPermisss" :show-daglog.sync="showDaglog" />
    </div>
  </div>
</template>

<script>
import { getPermission, delPermission } from '@/api/permission'
import { tranListToTreeData } from '@/utils'
import addPermission from './components/add-permission.vue'
export default {
  components: {
    addPermission
  },
  data() {
    return {
      id: '',
      showDaglog: false, // 控制是否显示添加 编辑面板
      permissionList: []// 权限列表
    }
  },
  created() {
    this.getPermission()
  },
  methods: {
    async getPermission() {
      const res = await getPermission()
      const list = tranListToTreeData(res, '0')
      this.permissionList = list
    },
    // 在根节点添加权限
    addAll() {
      this.showDaglog = true
      this.$refs.addPermisss.updateForm({ id: '0', type: 0 })
    },
    //  添加
    add(obj) {
      this.showDaglog = true
      this.$refs.addPermisss.updateForm(obj)
    },
    // 编辑
    editPermission(obj) {
      this.id = obj.id
      this.showDaglog = true
      this.$refs.addPermisss.editUpdateForm(obj)
    },
    // 删除 权限
    async delPermission(id) {
      try {
        await this.$confirm('确定要删除这个权限吗？', { type: 'warning' }) // 等待完成 点击确定就代表 可以删除了
        await delPermission(id)
        await this.getPermission()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>

</style>
